/* src/app/home/home.module.css */

/* Assume a typical mobile width */
.container {
  max-width: 600px; /* 假设典型的移动设备宽度 */
  margin: 0 auto;
  padding: 0 15px; /* 添加水平内边距 */
  font-family: sans-serif; /* 使用常用字体 */
  background-color: #f0f0f0; /* 浅色背景 */
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  font-size: 18px;
  font-weight: bold;
}

.headerStatus {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
}

.statusDot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #4CAF50; /* 绿色圆点 */
  border-radius: 50%;
  margin-right: 5px;
}

/* Banner */
.banner {
  position: relative;
  margin: 15px 0;
  border-radius: 8px;
  overflow: hidden;
  /* Ensure slider takes full width of banner container */
  /* 确保滑块占据横幅容器的全部宽度 */
}

.bannerImage {
  width: 100%;
  height: auto;
  display: block;
  /* Adjust object-fit if needed */
  /* 如有需要调整 object-fit */
  object-fit: cover;
}

/* Existing bannerOverlay styles (commented out in JSX) */
/* 现有 bannerOverlay 样式（在 JSX 中已注释） */
.bannerOverlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  color: white;
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 14px;
  text-align: right;
}

.bannerText {
    line-height: 1.4;
}

/* Icons Row */
.iconsRow {
  display: flex;
  justify-content: space-around;
  padding: 15px 0;
  background-color: white;
  margin: 15px 0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.iconItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #333;
  font-size: 12px;
}

.icon {
    width: 40px; /* 图标大小 */
    height: 40px; /* 图标大小 */
    margin-bottom: 5px;
}

.icon img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 确保图标适应 */
}


/* Recommendations Header */
.recommendationsHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}

.recommendationsLink {
  font-size: 14px;
  color: #007bff; /* 链接颜色 */
  font-weight: normal;
}

/* Content Cards (Recommendations) */
.contentCards {
  display: flex;
  overflow-x: auto; /* 启用水平滚动 */
  padding-bottom: 15px; /* 为滚动条添加内边距 */
  margin-bottom: 15px; /* 在这部分下方添加外边距 */
  -webkit-overflow-scrolling: touch; /* 改进触摸设备的滚动 */
}

.card {
  flex: 0 0 auto; /* 防止卡片缩小 */
  width: 180px; /* 卡片宽度 */
  margin-right: 15px; /* 卡片之间的间距 */
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.cardImage {
  width: 100%;
  height: 100px; /* 图片高度 */
  object-fit: cover; /* 覆盖区域 */
  display: block;
}

.cardContent {
  padding: 10px;
}

.cardTitle {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cardSubtitle {
    font-size: 12px;
    color: #555;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cardDescription {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
}

.cardMeta {
  font-size: 11px;
  color: #999;
  line-height: 1.3;
   display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制文本行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 新增：打咖圣地 区块样式 */
.checkinSection {
    margin: 15px 0; /* 在这部分周围添加外边距 */
}

.checkinHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}

.checkinTitle {
  font-size: 16px;
  font-weight: bold;
}

.checkinLink {
  font-size: 14px;
  color: #007bff; /* 链接颜色 */
  font-weight: normal;
}

.checkinCards {
  display: flex;
  overflow-x: auto; /* 启用水平滚动 */
  padding-bottom: 15px; /* 为滚动条添加内边距 */
  -webkit-overflow-scrolling: touch;
   /* 改进触摸设备的滚动 */
}

.checkinCard {
  flex: 0 0 auto; /* 防止卡片缩小 */
  width: 150px; /* 根据需要调整宽度 */
  margin-right: 10px; /* 卡片之间的间距 */
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.checkinCardImage {
  width: 100%;
  height: 90px; /* 根据需要调整图片高度 */
  object-fit: cover; /* 覆盖区域 */
  display: block;
}

.checkinCardContent {
  padding: 8px; /* 根据需要调整内边距 */
}

.checkinCardTitle {
  font-size: 13px; /* 调整字体大小 */
  font-weight: bold;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkinCardDescription {
  font-size: 11px; /* 调整字体大小 */
  color: #555;
  line-height: 1.3;
  /* Maybe limit lines if needed, similar to cardMeta */
  /* 如有需要，可限制行数，类似于 cardMeta */
} 
/* 新增动画相关样式 */
.slick-slide {
  transition: opacity 0.3s ease;
}

/* 为滚动容器添加平滑滚动 */
.contentCards,
.checkinCards {
  scroll-behavior: smooth;
}

/* 卡片悬浮效果增强 */
.card:hover,
.checkinCard:hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 状态点动画 */
.statusDot {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* 图标动画 */
.iconItem img {
  transition: transform 0.3s ease;
}
.iconItem:hover img {
  transform: scale(1.1);
}
